<template>
  <div class="container-box" :class="change ? 'thidden' : 'tshow'">
    <van-nav-bar fixed>
      <!-- 返回上一页 -->
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" />
      </template>
      <!-- 查询 -->
      <template #title>
        商品详情
      </template>
      <!-- 个人中心 -->
      <template #right>
        <van-icon name="apps-o" v-if="change" @click="changeFn" />
        <van-icon name="cross" v-else @click="changeFn" />
      </template>
    </van-nav-bar>
    <van-grid :border="false" :class="change ? 'hidden' : 'show'">
      <van-grid-item icon="shop-o" text="首页" />
      <van-grid-item icon="contact" text="个人中心" />
      <van-grid-item icon="cart-o" text="购物车" />
      <van-grid-item icon="coupon-o" text="活动礼券" />
    </van-grid>
    <!-- 轮播 -->
    <van-swipe @change="onChange">
      <van-swipe-item v-for="item in showImage" :key="item.id">
        <van-image :src="item.url" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }} / {{ showImage.length }}
        </div>
      </template>
    </van-swipe>
    <!-- 标题 -->
    <div class="cake-info box">
      <h1>四重奏蛋糕(幸福西饼（武汉）)</h1>

      <p>榴莲、芒果、巧克力、提拉米苏，多重享受一次到“味”</p>
      <footer>
        <span><sub>¥</sub><b id="get_current_price">208.00</b> </span>
        <div class="tags">
          <div class="tag">专人配送</div>
        </div>
        <div class="clearfix"></div>
      </footer>
    </div>
    <!-- 规格 -->
    <van-cell title="规格：" is-link class="mt" />
    <van-cell title="查看配送范围" is-link class="mt" />
    <div class="scope mt">
      <h2>配送范围</h2>
      <span>
        费配送：
        江岸区，硚口区，江汉区，汉阳区，沌口开发区（东风大道沿线至京港澳高速以东，天鹅湖大道沿线至知音湖大道以东，汉阳大道沿线至恒大绿洲附近）；武昌区，青山区，洪山区（黄家湖，白沙洲沿线不过四环）；；东西湖区域范围：汉水沿河大道以北，长江沿江大道以西，黄陂后湖大桥以南（滠口不过滠口大桥），机场高速，常青路，青年路，武胜路以东；硚口区域汉水沿河大道以北，武胜路，青年路，机场高速，常青路，机场高速以西，沿湖
      </span>
      <div>
        <van-icon name="clock-o" />即刻下单，预计最早6月08日 10:00-12:00送达
      </div>
    </div>
    <!-- 评论 -->
    <div class="mt btm">
      <van-cell title="评论" style="border-bottom: 1px solid #eaeaea;">
        <template #right-icon>
          综合评分
          <span style="color:#f35255; margin-left:0.1rem">5.0</span>
        </template>
      </van-cell>
      <div>
        <div class="comments">
          <div class="phone-date">
            <span class="phone">1592******</span>
            <span class="date">2021年01月15日</span>
          </div>
          <div class="score-weight">
            <span class="score">评分：5.0</span>
            <span class="weight">规格：2磅</span>
          </div>
          <p class="content">
            味道可以，比其他App和实体店购买贵点
          </p>
          <div class="img"></div>
        </div>
        <div class="comments">
          <div class="phone-date">
            <span class="phone">1592******</span>
            <span class="date">2021年01月15日</span>
          </div>
          <div class="score-weight">
            <span class="score">评分：5.0</span>
            <span class="weight">规格：2磅</span>
          </div>
          <p class="content">
            味道可以，比其他App和实体店购买贵点
          </p>
          <div class="img"></div>
        </div>
      </div>
    </div>
    <!-- 品牌 -->
    <div class="mt">
      <van-cell title="图文详情" style="border-bottom: 1px solid #eaeaea;" />
      <div class="graphic">
        <van-image
          v-for="item in graphicList"
          :key="item.id"
          width="100%"
          lazy-load
          :src="item.url"
        />
      </div>
    </div>
    <!-- 原材料 -->

    <!-- 底部购物车 -->
    <van-goods-action :safe-area-inset-bottom="true">
      <van-goods-action-icon icon="chat-o" text="咨询" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        text="加入购物车"
        @click="show = true"
      />
      <van-goods-action-button
        @click="show = true"
        color="#f65858"
        type="danger"
        text="立即购买"
      />
    </van-goods-action>

    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      change: true,
      current: 0,
      showImage: [
        { id: 1, url: 'https://img.dangaoss.com/public/p/65/7/1250237_m.jpg' },
        { id: 2, url: 'https://img.dangaoss.com/public/p/66/8/1250238_m.jpg' }
      ],
      graphicList: [
        { id: 1, url: 'https://img.dangaoss.com/public/p/69/11/1250241_m.jpg' },
        { id: 2, url: 'https://img.dangaoss.com/public/p/68/10/1250240_m.jpg' },
        { id: 3, url: 'https://img.dangaoss.com/public/p/70/12/1250242_m.jpg' },
        { id: 4, url: 'https://img.dangaoss.com/public/p/71/13/1250243_m.jpg' },
        { id: 5, url: 'https://img.dangaoss.com/public/p/72/14/1250244_m.jpg' },
        { id: 6, url: 'https://img.dangaoss.com/public/p/76/18/1250248_m.jpg' }
      ],
      show: false,
      goodsId: 0,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg' // 用于预览显示的规格类目图片
              },
              {
                id: '1',
                name: '蓝色',
                imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg'
              }
            ],
            largeImageMode: true //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110 // 当前 sku 组合对应的库存
          }
        ],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: '留言', // 留言名称
            type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: '1', // 是否必填 '1' 表示必填
            placeholder: '' // 可选值，占位文本
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://img01.yzcdn.cn/1.jpg'
      },
      quotaUsed: 1,
      quota: 0,
      messageConfig: {
        // 数据结构见下方文档
      }
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    changeFn() {
      this.change = !this.change
    },
    onChange(index) {
      this.current = index
    },
    onBuyClicked() {},
    onAddCartClicked() {}
  }
}
</script>

<style lang="less" scoped>
.tshow {
  transition: all 0.5s;
  padding-top: 104px;
}
.thidden {
  transition: all 0.5s;
  padding-top: 47px;
}
.container-box {
  background-color: #f5f5f5;
  padding-bottom: 60px;
  .van-nav-bar {
    /deep/.van-nav-bar__title {
      color: #ff4463;
    }
    .van-icon {
      color: #ff4463;
      font-size: 0.4rem;
    }
  }
  .hidden {
    transition: all 0.5s;
    position: fixed;
    top: -10px;
    left: 0;
    display: none;
  }
  .show {
    transition: all 0.5s;
    position: fixed;
    top: 47px;
    left: 0;
  }
  .van-grid {
    width: 100%;
    /deep/.van-grid-item__content {
      padding: 0;
      padding-top: 0.2rem;
      color: #777777;
      .van-icon {
        font-size: 0.45rem;
        color: #777777;
      }
    }
    /deep/.van-grid-item__text {
      margin-top: 0;
      line-height: 2;
    }
  }
  .van-image {
    display: block;
  }
  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 30px;
    padding: 0.1rem 0.3rem;
    font-size: 0.3rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 0.5rem;
  }
  .cake-info {
    padding: 0.25rem 0 0.25rem 0.25rem;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    h1 {
      font-size: 0.33rem;
      margin-bottom: 0.2rem;
      padding-right: 1rem;
      color: #524946;
      font-weight: normal;
    }
    p {
      text-align: justify;
      line-height: 1.2;
      margin-bottom: 0.2rem;
      padding-right: 0.1rem;
      font-size: 0.25rem;
      color: #6d6d6d;
    }
    sub {
      display: inline-block;
      vertical-align: middle;
      font-size: 0.8rem;
    }
    footer {
      display: flex;
      align-items: center;
      span {
        color: #f65858;
        display: flex;
        align-items: center;
        b {
          font-size: 0.4rem;
          font-weight: normal;
        }
        sub {
          display: inline-block;
          vertical-align: middle;
          font-size: 0.2rem;
        }
      }
      .tags {
        display: flex;
        .tag {
          display: inline-block;
          margin-left: 0.1rem;
          padding: 0.05rem;
          border: 1px solid #f35255;
          border-radius: 0.1rem;
          color: #f35255;
          font-size: 0.2rem;
        }
      }
    }
  }
  .van-cell {
    &::after {
      border-bottom: 0;
    }
  }
  .mt {
    margin-top: 0.2rem;
  }
  .btm {
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
  }
  .scope {
    background-color: #fff;
    padding: 0.25rem 0.3rem;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    h2 {
      color: #524946;
      font-size: 0.3rem;
      font-weight: normal;
    }
    span {
      margin-top: 0.1rem;
      font-size: 0.25rem;
      color: #6d6d6d;
      display: block;
      line-height: 0.4rem;
    }
    div {
      display: flex;
      align-items: center;
      margin-top: 0.2rem;
      padding-top: 0.2rem;
      border-top: 1px solid #eaeaea;
      font-size: 0.25rem;
      color: #6d6d6d;
      .van-icon {
        color: #f35558;
        font-weight: bold;
        font-size: 0.25rem;
        margin-right: 0.1rem;
      }
    }
  }
  .comments {
    background: #fff;
    padding: 0.2rem;
    font-size: 0.25rem;
    border-bottom: 1px solid #eaeaea;
    &:last-child {
      border-bottom: 0;
    }
    .phone-date {
      color: #999999;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2rem;
    }
    .score-weight {
      color: #999999;
      margin-bottom: 0.1rem;
      span:first-child {
        margin-right: 0.2rem;
      }
    }
    .content {
      margin-bottom: 0.1rem;
    }
  }
  .graphic {
    padding: 0.2rem;
    background: #fff;
  }
}
</style>
